<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>灵犀智苑 - 家具商城</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }

        :root {
            --primary: #4361ee;
            --primary-light: #5e72e4;
            --secondary: #4cc9f0;
            --accent: #e67e22;
            --light: #ecf0f1;
            --dark: #34495e;
            --darker: #2c3e50;
            --success: #27ae60;
            --danger: #e74c3c;
            --text: #2c3e50;
            --text-light: #7f8c8d;
            --glass: rgba(255, 255, 255, 0.2);
            --border: rgba(255, 255, 255, 0.3);
            --shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
            --transition: all 0.3s ease;
        }

        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #e4e7eb 100%);
            color: var(--text);
            min-height: 100vh;
            overflow-x: hidden;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 2rem;
        }

        header {
            padding: 1rem 0;
        }

        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 2rem;
            position: relative;
            z-index: 100;
        }

        .logo {
            display: flex;
            align-items: center;
            font-size: 1.8rem;
            font-weight: 700;
            background: linear-gradient(90deg, var(--primary), var(--accent));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .logo-icon {
            margin-right: 10px;
            animation: float 3s ease-in-out infinite;
        }

        .nav-links {
            list-style: none;
            display: flex;
            gap: 2rem;
        }

        .nav-links a {
            color: var(--darker);
            text-decoration: none;
            font-weight: 500;
            padding: 8px 0;
            position: relative;
            transition: var(--transition);
        }

        .nav-links a:after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: 0;
            left: 0;
            background: var(--primary);
            transition: var(--transition);
        }

        .nav-links a:hover:after,
        .nav-links a.active:after {
            width: 100%;
        }

        .nav-links a.active {
            color: var(--primary);
        }

        .cta-buttons {
            display: flex;
            gap: 1rem;
            align-items: center;
        }

        .cart-icon {
            position: relative;
            cursor: pointer;
            font-size: 1.4rem;
            color: var(--darker);
            transition: var(--transition);
        }

        .cart-icon:hover {
            color: var(--primary);
        }

        .cart-count {
            position: absolute;
            top: -10px;
            right: -10px;
            background-color: var(--accent);
            color: white;
            font-size: 0.7rem;
            font-weight: 600;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: pulse 1.5s infinite;
        }

        .btn {
            padding: 0.7rem 1.5rem;
            border-radius: 12px;
            border: none;
            cursor: pointer;
            font-weight: 500;
            transition: var(--transition);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
        }

        .btn-login {
            background: transparent;
            color: var(--darker);
            border: 1px solid var(--border);
        }

        .btn-login:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: translateY(-2px);
        }

        .btn-signup {
            background: linear-gradient(90deg, var(--primary), var(--secondary));
            color: white;
            box-shadow: 0 4px 15px rgba(67, 97, 238, 0.3);
        }

        .btn-signup:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(67, 97, 238, 0.4);
        }

        main {
            padding: 4rem 0;
            position: relative;
        }

        .hero {
            background: linear-gradient(rgba(44, 62, 80, 0.9), rgba(44, 62, 80, 0.8)), url('https://images.unsplash.com/photo-1493663284031-b7e3aefcae8e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80');
            background-size: cover;
            background-position: center;
            color: white;
            padding: 100px 0;
            text-align: center;
            border-radius: 20px;
            margin-bottom: 40px;
            position: relative;
            overflow: hidden;
        }

        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle, transparent 20%, rgba(0,0,0,0.5) 150%);
        }

        .hero-content {
            position: relative;
            z-index: 2;
            max-width: 800px;
            margin: 0 auto;
        }

        .hero h1 {
            font-size: 3.5rem;
            margin-bottom: 20px;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
            animation: fadeInUp 0.8s ease;
        }

        .hero p {
            font-size: 1.3rem;
            margin: 0 auto 30px;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
            max-width: 600px;
            animation: fadeInUp 1s ease;
        }

        .back-to-home {
            position: absolute;
            top: 20px;
            left: 20px;
            color: white;
            background: rgba(255, 255, 255, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.3);
            padding: 10px 20px;
            border-radius: 12px;
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 8px;
            z-index: 10;
            transition: var(--transition);
        }

        .back-to-home:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: translateY(-2px);
        }

        .section-title {
            text-align: center;
            margin-bottom: 40px;
        }

        .section-title h2 {
            font-size: 2.5rem;
            margin-bottom: 15px;
            color: var(--darker);
            position: relative;
            display: inline-block;
        }

        .section-title h2::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background: var(--accent);
            border-radius: 2px;
        }

        .section-title p {
            font-size: 1.2rem;
            color: var(--text-light);
            max-width: 700px;
            margin: 0 auto;
        }

        .app-container {
            display: flex;
            gap: 20px;
        }
        
        .sidebar {
            flex: 0 0 250px;
            background: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            height: fit-content;
        }
        
        .main-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .filters {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-bottom: 30px;
            flex-wrap: wrap;
        }

        .filter-btn {
            padding: 10px 25px;
            background: white;
            border: 1px solid #e0e0e0;
            border-radius: 50px;
            cursor: pointer;
            transition: var(--transition);
            font-weight: 500;
        }

        .filter-btn:hover, .filter-btn.active {
            background: var(--primary);
            color: white;
            border-color: var(--primary);
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(67, 97, 238, 0.2);
        }

        .products-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 30px;
        }

        .product-card {
            background: white;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            transition: var(--transition);
            position: relative;
        }

        .product-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
        }

        .badge {
            position: absolute;
            top: 15px;
            right: 15px;
            background: var(--accent);
            color: white;
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 0.9rem;
            font-weight: 600;
            z-index: 2;
        }

        .card-img {
            height: 220px;
            overflow: hidden;
            position: relative;
            background: #f5f7fa;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .card-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

        .product-card:hover .card-img img {
            transform: scale(1.05);
        }

        .quick-view {
            position: absolute;
            bottom: 15px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(255, 255, 255, 0.9);
            padding: 8px 20px;
            border-radius: 30px;
            font-weight: 500;
            opacity: 0;
            transition: var(--transition);
            cursor: pointer;
            backdrop-filter: blur(5px);
        }

        .product-card:hover .quick-view {
            opacity: 1;
            bottom: 20px;
        }

        .card-content {
            padding: 20px;
        }

        .card-content h3 {
            font-size: 1.4rem;
            margin-bottom: 10px;
            color: var(--darker);
        }

        .card-content p {
            color: var(--text-light);
            margin-bottom: 15px;
            font-size: 0.95rem;
            min-height: 60px;
        }

        .price {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--accent);
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .original-price {
            font-size: 1rem;
            color: var(--text-light);
            text-decoration: line-through;
        }

        .card-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-top: 1px solid #eee;
            padding: 15px 20px;
        }

        .rating {
            color: #f1c40f;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .rating span {
            color: var(--text-light);
            font-size: 0.9rem;
        }

        .add-to-cart {
            background: var(--primary);
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 8px;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .add-to-cart:hover {
            background: #3a56d4;
            transform: scale(1.05);
        }

        .cart-panel {
            position: fixed;
            top: 0;
            right: -400px;
            width: 380px;
            height: 100vh;
            background: white;
            box-shadow: -5px 0 25px rgba(0, 0, 0, 0.1);
            z-index: 1000;
            transition: all 0.5s ease;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .cart-panel.active {
            right: 0;
        }

        .cart-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px;
            background: var(--primary);
            color: white;
        }

        .cart-header h2 {
            font-size: 1.5rem;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .close-cart {
            background: transparent;
            border: none;
            color: white;
            font-size: 1.5rem;
            cursor: pointer;
        }

        .cart-items {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
        }

        .cart-item {
            display: flex;
            padding: 15px 0;
            border-bottom: 1px solid #eee;
        }

        .cart-item-img {
            width: 80px;
            height: 80px;
            border-radius: 8px;
            overflow: hidden;
            background: #f5f7fa;
            flex-shrink: 0;
            margin-right: 15px;
        }

        .cart-item-info {
            flex: 1;
        }

        .cart-item-title {
            font-weight: 600;
            margin-bottom: 8px;
            display: flex;
            justify-content: space-between;
        }

        .cart-item-price {
            color: var(--accent);
            font-weight: 600;
            margin-bottom: 10px;
        }

        .cart-item-actions {
            display: flex;
            align-items: center;
        }

        .quantity-btn {
            width: 28px;
            height: 28px;
            background: #f0f0f0;
            border: none;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 1rem;
        }

        .quantity-input {
            width: 40px;
            height: 28px;
            text-align: center;
            border: 1px solid #ddd;
            border-radius: 4px;
            margin: 0 8px;
        }

        .remove-item {
            color: var(--danger);
            background: transparent;
            border: none;
            margin-left: 15px;
            cursor: pointer;
            transition: var(--transition);
        }

        .remove-item:hover {
            color: #c0392b;
        }

        .cart-empty {
            text-align: center;
            padding: 40px 0;
            color: var(--text-light);
        }

        .cart-empty i {
            font-size: 4rem;
            color: #e0e0e0;
            margin-bottom: 20px;
        }

        .cart-summary {
            padding: 20px;
            border-top: 1px solid #eee;
            background: #fafafa;
        }

        .cart-summary-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 12px;
        }

        .cart-total {
            font-size: 1.2rem;
            font-weight: 700;
            margin: 15px 0;
            color: var(--darker);
        }

        .checkout-btn {
            width: 100%;
            padding: 15px;
            background: var(--success);
            color: white;
            border: none;
            border-radius: 12px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            transition: var(--transition);
        }

        .checkout-btn:hover {
            background: #219653;
            transform: translateY(-2px);
        }

        .modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 2000;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }

        .modal.active {
            opacity: 1;
            visibility: visible;
        }

        .modal-content {
            background: white;
            border-radius: 20px;
            width: 400px;
            max-width: 90%;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
            transform: translateY(-20px);
            opacity: 0;
            transition: all 0.4s ease;
        }

        .modal.active .modal-content {
            transform: translateY(0);
            opacity: 1;
        }

        .modal-header {
            padding: 20px;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .close-modal {
            background: transparent;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
        }

        .modal-body {
            padding: 25px;
        }

        .payment-options {
            display: flex;
            gap: 15px;
            margin: 20px 0;
        }

        .payment-option {
            flex: 1;
            border: 2px solid #eee;
            border-radius: 10px;
            padding: 15px;
            text-align: center;
            cursor: pointer;
            transition: var(--transition);
        }

        .payment-option.active {
            border-color: var(--primary);
            background: rgba(67, 97, 238, 0.05);
        }

        .payment-option i {
            font-size: 2rem;
            margin-bottom: 10px;
        }

        .payment-form {
            margin-top: 20px;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
        }

        .form-group input {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 1rem;
        }

        .submit-payment {
            width: 100%;
            padding: 15px;
            background: var(--primary);
            color: white;
            border: none;
            border-radius: 12px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            margin-top: 20px;
            transition: var(--transition);
        }

        .submit-payment:hover {
            background: #3a56d4;
        }

        .success-payment {
            text-align: center;
            padding: 30px;
        }

        .success-payment i {
            font-size: 4rem;
            color: var(--success);
            margin-bottom: 20px;
        }

        .address-section {
            margin: 20px 0;
            padding: 15px;
            border: 1px solid #eee;
            border-radius: 10px;
        }

        .address-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;
        }

        .address-list {
            max-height: 200px;
            overflow-y: auto;
        }

        .address-item {
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 8px;
            margin-bottom: 10px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .address-item:hover {
            border-color: var(--primary);
            background-color: rgba(67, 97, 238, 0.05);
        }

        .address-item.selected {
            border-color: var(--primary);
            background-color: rgba(67, 97, 238, 0.1);
        }

        .address-item h4 {
            margin-bottom: 5px;
        }

        .address-item p {
            color: var(--text-light);
            font-size: 0.9rem;
            margin-bottom: 5px;
        }

        .add-address-btn {
            background: transparent;
            border: 1px dashed #ddd;
            color: var(--text-light);
            width: 100%;
            padding: 10px;
            border-radius: 8px;
            cursor: pointer;
            margin-top: 10px;
            transition: all 0.3s;
        }

        .add-address-btn:hover {
            border-color: var(--primary);
            color: var(--primary);
        }

        .orders-panel {
            display: none;
            margin-top: 30px;
            padding: 20px;
            background: white;
            border-radius: 16px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
        }

        .orders-panel.active {
            display: block;
        }

        .order-card {
            background: white;
            border: 1px solid #eee;
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        }

        .order-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }

        .order-id {
            font-weight: 600;
            color: var(--darker);
        }

        .order-status {
            padding: 5px 15px;
            border-radius: 20px;
            font-weight: 600;
            font-size: 0.9rem;
        }

        .status-pending {
            background: #fff3cd;
            color: #856404;
        }

        .status-paid {
            background: #d4edda;
            color: #155724;
        }

        .status-shipped {
            background: #cce5ff;
            color: #004085;
        }

        .status-completed {
            background: #e2e3e5;
            color: #383d41;
        }

        .status-canceled {
            background: #f8d7da;
            color: #721c24;
        }

        .order-details {
            margin-bottom: 15px;
        }

        .order-details-row {
            display: flex;
            margin-bottom: 8px;
        }

        .order-label {
            width: 100px;
            font-weight: 500;
            color: var(--text-light);
        }

        .order-value {
            flex: 1;
        }

        .order-items {
            margin-top: 15px;
        }

        .order-item {
            display: flex;
            margin-bottom: 10px;
            padding-bottom: 10px;
            border-bottom: 1px solid #f5f5f5;
        }

        .order-item-img {
            width: 60px;
            height: 60px;
            border-radius: 8px;
            overflow: hidden;
            background: #f5f7fa;
            margin-right: 15px;
            flex-shrink: 0;
        }

        .order-item-info {
            flex: 1;
        }

        .order-item-title {
            font-weight: 500;
            margin-bottom: 5px;
        }

        .order-item-price {
            color: var(--accent);
            font-weight: 500;
        }

        .order-actions {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 15px;
        }

        .order-action-btn {
            padding: 8px 15px;
            border-radius: 8px;
            font-size: 0.9rem;
            cursor: pointer;
            transition: var(--transition);
            border: none;
        }

        .order-action-pay {
            background: var(--primary);
            color: white;
        }

        .order-action-cancel {
            background: #f8f9fa;
            color: var(--text-light);
            border: 1px solid #ddd;
        }

        .order-action-view {
            background: #f8f9fa;
            color: var(--primary);
            border: 1px solid var(--primary);
        }

        .no-orders {
            text-align: center;
            padding: 40px 0;
            color: var(--text-light);
        }

        .no-orders i {
            font-size: 4rem;
            color: #e0e0e0;
            margin-bottom: 20px;
        }

        footer {
            background-color: var(--darker);
            color: white;
            padding: 60px 0 30px;
            margin-top: 80px;
        }

        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 40px;
            margin-bottom: 40px;
        }

        .footer-column h3 {
            font-size: 1.4rem;
            margin-bottom: 20px;
            position: relative;
            padding-bottom: 10px;
        }

        .footer-column h3::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 50px;
            height: 3px;
            background-color: var(--accent);
        }

        .footer-column ul {
            list-style: none;
        }

        .footer-column ul li {
            margin-bottom: 12px;
        }

        .footer-column a {
            color: #bdc3c7;
            text-decoration: none;
            transition: all 0.3s ease;
        }

        .footer-column a:hover {
            color: white;
            padding-left: 5px;
        }

        .social-links {
            display: flex;
            gap: 15px;
            margin-top: 20px;
        }

        .social-links a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.1);
            color: white;
            font-size: 1.2rem;
            transition: all 0.3s ease;
        }

        .social-links a:hover {
            background-color: var(--accent);
            transform: translateY(-3px);
        }

        .newsletter input {
            width: 100%;
            padding: 12px 15px;
            border: none;
            border-radius: 6px;
            margin-bottom: 15px;
            font-size: 1rem;
        }

        .copyright {
            text-align: center;
            padding-top: 30px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            color: #95a5a6;
            font-size: 0.9rem;
        }
        
        #categoryList ul {
            list-style: none;
            padding-left: 0;
            margin-top: 15px;
        }

        #categoryList li a {
            text-decoration: none;
            color: var(--text);
            display: block;
            padding: 8px 12px;
            border-radius: 6px;
            transition: var(--transition);
            margin-bottom: 5px;
        }

        #categoryList li a:hover, #categoryList li a.active {
            background-color: var(--primary-light);
            color: white;
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes float {
            0% {
                transform: translateY(0px);
            }
            50% {
                transform: translateY(-15px);
            }
            100% {
                transform: translateY(0px);
            }
        }

        @keyframes pulse {
            0% {
                box-shadow: 0 0 0 0 rgba(230, 126, 34, 0.5);
            }
            70% {
                box-shadow: 0 0 0 10px rgba(230, 126, 34, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(230, 126, 34, 0);
            }
        }

        /* Pagination styles */
        .pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 30px;
            gap: 10px;
        }

        .pagination button {
            padding: 8px 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            background-color: white;
            cursor: pointer;
            transition: var(--transition);
        }

        .pagination button:hover:not(.disabled) {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
        }

        .pagination button.active {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
        }

        .pagination button.disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .pagination .page-number {
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 8px;
            background-color: white;
            cursor: pointer;
            transition: var(--transition);
        }

        .pagination .page-number:hover:not(.active) {
            background-color: #f0f0f0;
        }

        .pagination .page-number.active {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
        }


        @media (max-width: 1024px) {
            .hero h1 {
                font-size: 3rem;
            }
            
            .nav-links {
                gap: 15px;
            }
        }

        @media (max-width: 768px) {
            .navbar {
                flex-direction: column;
                gap: 1.5rem;
            }
            
            .nav-links {
                flex-wrap: wrap;
                justify-content: center;
            }
            
            .hero {
                padding: 70px 0;
            }
            
            .hero h1 {
                font-size: 2.2rem;
            }
            
            .section-title h2 {
                font-size: 2rem;
            }
            
            .filters {
                gap: 10px;
            }
            
            .filter-btn {
                padding: 8px 15px;
                font-size: 0.9rem;
            }
            
            .cart-panel {
                width: 320px;
            }
        }

        @media (max-width: 480px) {
            .products-container {
                grid-template-columns: 1fr;
            }
            
            .hero h1 {
                font-size: 1.8rem;
            }
            
            .section-title h2 {
                font-size: 1.8rem;
            }
            
            .cart-panel {
                width: 100%;
                right: -100%;
            }
            
            .order-details-row {
                flex-direction: column;
            }
            
            .order-label {
                width: 100%;
                margin-bottom: 5px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <nav class="navbar">
                <div class="logo">
                    <span class="logo-icon">✨</span>
                    <span>灵犀智苑</span>
                </div>
                <ul class="nav-links">
                    <li><a href="index.html">首页</a></li>
                    <li><a href="design.html">AI设计</a></li>
                    <li><a href="mall.html" class="active">家具商城</a></li>
                    <li><a href="idea.html">灵感库</a></li>
                    <li><a href="partner.html">商家合作</a></li>
                </ul>
                <div class="cta-buttons">
                    <div class="cart-icon" id="cart-icon">
                        <i class="fas fa-shopping-cart"></i>
                        <span class="cart-count">0</span>
                    </div>
                    <button class="btn btn-login" id="login-btn">登录</button>
                    <a href="register.html" class="btn btn-signup">免费注册</a>
                </div>
            </nav>
        </header>

        <main>
            <section class="hero">
                <a href="index.html" class="back-to-home">
                    <i class="fas fa-arrow-left"></i> 返回首页
                </a>
                <div class="hero-content">
                    <h1>发现完美家居，打造梦想空间</h1>
                    <p>探索灵犀智苑精选的高品质家具，为您AI设计的家添置完美家具</p>
                    <a href="design.html" class="btn btn-signup">返回设计 <i class="fas fa-paint-roller"></i></a>
                </div>
            </section>

            <div class="app-container">
                <aside class="sidebar">
                    <h3 style="margin-top: 30px;">我的订单</h3>
                    <button class="btn btn-signup" onclick="showOrdersPanel()">
                        <i class="fas fa-list"></i> 查看订单
                    </button>

                    <h3 style="margin-top: 30px;">商品分类</h3>
                    <div id="categoryList">
                        <!-- 商品分类将由JS动态加载 -->
                    </div>

                    <h3 style="margin-top: 30px;">地址管理</h3>
                    <button class="btn" onclick="loadAddresses()">
                        <i class="fas fa-sync"></i> 刷新地址
                    </button>
                    <button class="btn btn-signup" onclick="showAddrForm()">
                        <i class="fas fa-plus"></i> 新增地址
                    </button>
                    <div id="addressList" style="margin-top: 15px;"></div>
                </aside>
                
                <div class="main-content">
                    <div class="section-title">
                        <h2>精选商品</h2>
                        <p>为您的家挑选完美单品</p>
                    </div>
                    
                    <div class="filters" id="product-filters">
                        <!-- 商品筛选按钮将由JS动态加载 -->
                    </div>
                    
                    <div class="products-container" id="productList">
                        </div>
                    <div class="pagination" id="product-pagination">
                        <button id="product-prev-btn" class="disabled">上一页</button>
                        <div class="page-numbers" id="product-page-numbers"></div>
                        <button id="product-next-btn">下一页</button>
                    </div>
                    
                    <div class="section-title" style="margin-top: 50px;">
                        <h2>精选套餐</h2>
                        <p>为您的家挑选完美搭配套餐</p>
                    </div>
                    
                    <div class="filters" id="setmenu-filters">
                        <!-- 套餐筛选按钮将由JS动态加载 -->
                    </div>
                    
                    <div class="products-container" id="setmenuList">
                        </div>
                    <div class="pagination" id="setmenu-pagination">
                        <button id="setmenu-prev-btn" class="disabled">上一页</button>
                        <div class="page-numbers" id="setmenu-page-numbers"></div>
                        <button id="setmenu-next-btn">下一页</button>
                    </div>
                    
                    <div class="orders-panel" id="orders-panel">
                        <div class="section-title">
                            <h2>我的订单</h2>
                            <p>查看和管理您的订单</p>
                        </div>
                        <div id="orders-container">
                            </div>
                    </div>
                </div>
            </div>
        </main>
        
        <div class="cart-panel" id="cart-panel">
            <div class="cart-header">
                <h2><i class="fas fa-shopping-cart"></i> 购物车</h2>
                <button class="close-cart" id="close-cart">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="cart-items" id="cart-items">
                <div class="cart-empty">
                    <i class="fas fa-shopping-basket"></i>
                    <h3>您的购物车是空的</h3>
                    <p>请添加一些商品到购物车</p>
                </div>
            </div>
            <div class="cart-summary">
                <div class="cart-summary-row">
                    <span>小计:</span>
                    <span id="cart-subtotal">¥ 0</span>
                </div>
                <div class="cart-summary-row">
                    <span>运费:</span>
                    <span>¥ 0</span>
                </div>
                <div class="cart-summary-row">
                    <span>优惠:</span>
                    <span>¥ 0</span>
                </div>
                <div class="cart-total">
                    <span>总计:</span>
                    <span id="cart-total">¥ 0</span>
                </div>
                <button class="checkout-btn" id="checkout-btn">
                    <i class="fas fa-check-circle"></i> 去结算
                </button>
                <!-- 自动AI生图按钮和图片显示区 -->
                <button class="checkout-btn" id="generate-cart-image-btn" style="margin-top:10px;background: var(--accent);">
                    <i class="fas fa-image"></i> 生成AI搭配图片
                </button>
                <div id="cart-ai-image-result" style="margin-top:15px; text-align:center;"></div>
            </div>
        </div>
        
        <div class="modal" id="payment-modal">
            <div class="modal-content">
                <div class="modal-header">
                    <h3>结算订单</h3>
                    <button class="close-modal" id="close-payment">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="modal-body" id="payment-body">
                    <div class="payment-info">
                        <div class="address-section">
                            <div class="address-header">
                                <h4>配送地址</h4>
                                <button class="btn btn-login" id="add-address">添加地址</button>
                            </div>
                            <div class="address-list" id="address-list-payment">
                                </div>
                        </div>
                        
                        <p>订单总金额: <strong id="payment-total">¥0</strong></p>
                        <div class="payment-options">
                            <div class="payment-option active" data-method="1">
                                <i class="fab fa-alipay"></i>
                                <div>支付宝</div>
                            </div>
                            <div class="payment-option" data-method="2">
                                <i class="fab fa-weixin"></i>
                                <div>微信支付</div>
                            </div>
                            <div class="payment-option" data-method="3">
                                <i class="far fa-credit-card"></i>
                                <div>银行卡</div>
                            </div>
                        </div>
                        <div class="payment-form">
                            <button class="submit-payment" id="submit-payment">
                                立即支付
                            </button>
                        </div>
                    </div>
                    <div class="success-payment" style="display: none;">
                        <i class="fas fa-check-circle"></i>
                        <h3>支付成功！</h3>
                        <p>感谢您的购买，订单已处理</p>
                        <button class="btn btn-signup" id="continue-shopping">
                            继续购物
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal" id="address-modal">
            <div class="modal-content">
                <div class="modal-header">
                    <h3>添加新地址</h3>
                    <button class="close-modal" id="close-address">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="consignee">收件人</label>
                        <input type="text" id="consignee" placeholder="请输入收件人姓名">
                    </div>
                    <div class="form-group">
                        <label for="phone">手机号</label>
                        <input type="tel" id="phone" placeholder="请输入手机号">
                    </div>
                    <div class="form-group">
                        <label for="province">省份</label>
                        <input type="text" id="province" placeholder="请输入省份">
                    </div>
                    <div class="form-group">
                        <label for="city">城市</label>
                        <input type="text" id="city" placeholder="请输入城市">
                    </div>
                    <div class="form-group">
                        <label for="district">区县</label>
                        <input type="text" id="district" placeholder="请输入区县">
                    </div>
                    <div class="form-group">
                        <label for="detail">详细地址</label>
                        <input type="text" id="detail" placeholder="请输入详细地址">
                    </div>
                    <div class="form-group">
                        <label for="is-default">
                            <input type="checkbox" id="is-default"> 设为默认地址
                        </label>
                    </div>
                    <button class="submit-payment" id="save-address">
                        保存地址
                    </button>
                </div>
            </div>
        </div>
       
    </div>

    <script>
        // API基础路径
        const API_BASE_URL = 'http://localhost:8088/another';
        let userId = 1; // 实际应用中应从登录用户获取
        
        // 全局状态
        let user = null;
        let cart = {
            items: [],
            count: 0,
            subtotal: 0,
            total: 0
        };
        let selectedAddress = null;

        // Pagination state
        const itemsPerPage = 3;
        let allProducts = [];
        let allSetMenus = []; // [MODIFICATION] This will store all setmenus fetched once.
        let currentProductPage = 1;
        let currentSetMenuPage = 1;
        
        // DOM元素引用
        const cartIcon = document.querySelector('.cart-icon');
        const cartPanel = document.getElementById('cart-panel');
        const closeCartBtn = document.getElementById('close-cart');
        const cartItemsContainer = document.getElementById('cart-items');
        const cartSubtotal = document.getElementById('cart-subtotal');
        const cartTotal = document.getElementById('cart-total');
        const checkoutBtn = document.getElementById('checkout-btn');
        const paymentModal = document.getElementById('payment-modal');
        const closePaymentBtn = document.getElementById('close-payment');
        const paymentTotal = document.getElementById('payment-total');
        const submitPaymentBtn = document.getElementById('submit-payment');
        const cartCount = document.querySelector('.cart-count');
        const productList = document.getElementById('productList');
        const setmenuList = document.getElementById('setmenuList');
        const addressList = document.getElementById('addressList');
        const loginBtn = document.getElementById('login-btn');
        const addAddressBtn = document.getElementById('add-address');
        const productFiltersContainer = document.getElementById('product-filters');
        const setMenuFiltersContainer = document.getElementById('setmenu-filters');
        const categoryListContainer = document.getElementById('categoryList');
        const ordersPanel = document.getElementById('orders-panel');
        const ordersContainer = document.getElementById('orders-container');
        const addressModal = document.getElementById('address-modal');
        const closeAddressBtn = document.getElementById('close-address');
        const saveAddressBtn = document.getElementById('save-address');
        const continueShoppingBtn = document.getElementById('continue-shopping');
        
        document.addEventListener('DOMContentLoaded', function() {
            setupAxios();
            checkLoginStatus();
            
            loadProductCategories();
            loadSetMenuCategories();
            fetchAndRenderAllProducts(0);
            fetchAllSetMenusAndRender(); // [MODIFICATION] Changed function call
            
            bindEventListeners();
        });
        
        async function loadProductCategories() {
            try {
                const response = await axios.get(`${API_BASE_URL}/user/user/category?type=1`);
                if (response.data.code === 1) {
                    const categories = response.data.data;
                    console.log(categories);
                    productFiltersContainer.innerHTML = '';
                    categoryListContainer.innerHTML = '';

                    const allButton = document.createElement('button');
                    allButton.className = 'filter-btn active';
                    allButton.textContent = '全部商品';
                    allButton.dataset.categoryId = '0';
                    allButton.addEventListener('click', () => handleFilterClick(allButton, 0, 'product'));
                    productFiltersContainer.appendChild(allButton);

                    const sidebarList = document.createElement('ul');

                    categories.forEach(category => {
                        const button = document.createElement('button');
                        button.className = 'filter-btn';
                        button.textContent = category.name;
                        button.dataset.categoryId = category.id;
                        button.addEventListener('click', () => handleFilterClick(button, category.id, 'product'));
                        productFiltersContainer.appendChild(button);

                        const listItem = document.createElement('li');
                        const link = document.createElement('a');
                        link.href = '#';
                        link.textContent = category.name;
                        link.dataset.categoryId = category.id;
                        link.addEventListener('click', (e) => {
                             e.preventDefault();
                             const correspondingButton = productFiltersContainer.querySelector(`[data-category-id='${category.id}']`);
                             if(correspondingButton) correspondingButton.click();
                        });
                        listItem.appendChild(link);
                        sidebarList.appendChild(listItem);
                    });
                    
                    categoryListContainer.appendChild(sidebarList);
                } else {
                    productFiltersContainer.innerHTML = '分类加载失败';
                }
            } catch (error) {
                console.error('加载商品分类失败:', error);
                productFiltersContainer.innerHTML = '加载分类时出错';
            }
        }

        async function loadSetMenuCategories() {
            try {
                const response = await axios.get(`${API_BASE_URL}/user/user/category?type=2`);
                if (response.data.code === 1) {
                    const categories = response.data.data;
                    setMenuFiltersContainer.innerHTML = '';

                    const allButton = document.createElement('button');
                    allButton.className = 'filter-btn active';
                    allButton.textContent = '全部套餐';
                    allButton.dataset.categoryId = '0';
                    allButton.addEventListener('click', () => handleFilterClick(allButton, 0, 'setmenu'));
                    setMenuFiltersContainer.appendChild(allButton);

                    categories.forEach(category => {
                        const button = document.createElement('button');
                        button.className = 'filter-btn';
                        button.textContent = category.name;
                        button.dataset.categoryId = category.id;
                        button.addEventListener('click', () => handleFilterClick(button, category.id, 'setmenu'));
                        setMenuFiltersContainer.appendChild(button);
                    });
                } else {
                    setMenuFiltersContainer.innerHTML = '分类加载失败';
                }
            } catch (error) {
                console.error('加载套餐分类失败:', error);
                setMenuFiltersContainer.innerHTML = '加载分类时出错';
            }
        }
        
        function handleFilterClick(clickedElement, categoryId, type) {
            const container = type === 'product' ? productFiltersContainer : setMenuFiltersContainer;
            
            container.querySelectorAll('.filter-btn').forEach(btn => btn.classList.remove('active'));
            clickedElement.classList.add('active');
            
            if (type === 'product') {
                categoryListContainer.querySelectorAll('a').forEach(a => a.classList.remove('active'));
                const correspondingLink = categoryListContainer.querySelector(`[data-category-id='${categoryId}']`);
                if(correspondingLink) correspondingLink.classList.add('active');
                fetchAndRenderAllProducts(categoryId);
            } else {
                // [MODIFICATION] Client-side filtering for setmenus
                currentSetMenuPage = 1;
                const filteredMenus = categoryId == 0 
                    ? allSetMenus 
                    : allSetMenus.filter(menu => menu.categoryId == categoryId);
                renderSetMenusWithPagination(filteredMenus, currentSetMenuPage);
            }
        }

        function setupAxios() {
            axios.interceptors.request.use(config => {
                const token = localStorage.getItem('token');
                if (token) {
                    config.headers.authentication = token;
                }
                return config;
            }, error => {
                return Promise.reject(error);
            });
            
            axios.interceptors.response.use(response => {
                return response;
            }, error => {
                if (error.response && error.response.status === 401) {
                    alert('请先登录');
                    window.location.href = 'login.html';
                }
                return Promise.reject(error);
            });
        }
        
        function checkLoginStatus() {
            const token = localStorage.getItem('token');
            if (token) {
                userId = localStorage.getItem('userId');
                let thisUrl = `${API_BASE_URL}/user/user/info?userId=${encodeURIComponent(userId)}`;
                axios.get(thisUrl)
                    .then(response => {
                        if (response.data.code === 1) {
                            user = response.data.data;
                            loginBtn.textContent = user.name;
                            loadAddresses();
                            loadCart();
                            loadOrders();
                        }
                    })
                    .catch(error => {
                        console.error('获取用户信息失败:', error);
                    });
            }
        }
        
        async function fetchAndRenderAllProducts(categoryId) {
            productList.innerHTML = '<div class="loading" style="margin: 20px auto; width: 40px; height: 40px;"></div>';
            
            const url = categoryId == 0 ? 
                `${API_BASE_URL}/user/product/list` : 
                `${API_BASE_URL}/user/product/list?categoryId=${categoryId}`;
            
            try {
                const response = await axios.get(url);
				// console.log(1);
                if (response.data.code === 1) {
                    const products = response.data.data || [];
					// console.log(2);
                    currentProductPage = 1;
					// console.log(3);
                    renderProductsWithPagination(products, currentProductPage);
					// console.log(4);
                } else {
                    console.error('加载商品失败:', response.data.msg);
					// console.log(5);
                    productList.innerHTML = `<p>加载商品失败：${response.data.msg}</p>`;
					// console.log(6);
                }
            } catch (error) {
				// console.log(7);
                console.error('加载商品失败:', error);
				// console.log(8);
                productList.innerHTML = '<p>加载商品失败，请稍后重试</p>';
				// console.log(9);
            }
        }

        function renderProductsWithPagination(productsToRender, page) {
            const totalPages = Math.ceil(productsToRender.length / itemsPerPage);
			// console.log(totalPages);
            const startIndex = (page - 1) * itemsPerPage;
			// console.log(startIndex);
            const endIndex = startIndex + itemsPerPage;
			// console.log(endIndex);
            const paginatedItems = productsToRender.slice(startIndex, endIndex);
			console.log(`paginatedItems: `);
			console.log(paginatedItems);

            renderProducts(paginatedItems); 
			console.log(14);
            setupPagination(productsToRender.length, page, 'product-pagination', renderProductsWithPagination, productsToRender);
			console.log(15);
        }

        function renderProducts(products) {
            productList.innerHTML = '';
            
            if (!products || products.length === 0) {
                productList.innerHTML = '<p style="text-align: center; color: var(--text-light);">暂无商品可供选择。</p>';
                return;
            }

            products.forEach(product => {
				const price = parseFloat(product.price) || 0;
                const productCard = document.createElement('div');
                productCard.className = 'product-card';
                productCard.innerHTML = `
                    <div class="badge">${product.status === 1 ? '上架中' : '下架'}</div>
                    <div class="card-img">
                        <img src="${product.image || 'https://via.placeholder.com/300x200?text=商品图片'}" alt="${product.name}">
                        <div class="quick-view" data-product-id="${product.id}" data-description="${product.description || '暂无描述'}">查看详情</div>
                    </div>
                    <div class="card-content">
                        <h3>${product.name}</h3>
                        <p>${product.description || '暂无描述'}</p>
                        <div class="price">
							¥ ${price.toFixed(2)}
						</div>
                    </div>
                    <div class="card-footer">
                        <button class="add-to-cart" data-product-id="${product.id}" data-product-name="${product.name}" data-product-price="${price}">
                            <i class="fas fa-cart-plus"></i> 加入购物车
                        </button>
                    </div>
                `;
                productList.appendChild(productCard);
            });
            
            document.querySelectorAll('#productList .quick-view').forEach(button => {
                button.addEventListener('click', function() {
                    const description = this.dataset.description;
                    showProductDetails(description); 
                });
            });

            document.querySelectorAll('#productList .add-to-cart').forEach(button => {
                button.addEventListener('click', function() {
                    const productId = this.dataset.productId;
                    const productName = this.dataset.productName;
                    const productPrice = parseFloat(this.dataset.productPrice);
                    
                    addToCart(productId, 0, productName, productPrice);
                });
            });
        }
        
        function showOrdersPanel() {
            ordersPanel.classList.toggle('active');
        }
        
        // [MODIFICATION] New function to fetch all setmenus once and render
        async function fetchAllSetMenusAndRender() {
            setmenuList.innerHTML = '<div class="loading" style="margin: 20px auto; width: 40px; height: 40px;"></div>';
            
            // URL no longer needs categoryId
            const url = `${API_BASE_URL}/user/setmenu/list`;
            
            try {
                const response = await axios.get(url);
                if (response.data.code === 1) {
                    allSetMenus = response.data.data || []; // Store all menus globally
                    currentSetMenuPage = 1; 
                    renderSetMenusWithPagination(allSetMenus, currentSetMenuPage); // Render initial full list
                } else {
                    console.error('加载套餐失败:', response.data.msg);
                    setmenuList.innerHTML = `<p>加载套餐失败：${response.data.msg}</p>`;
                }
            } catch (error) {
                console.error('加载套餐失败:', error);
                setmenuList.innerHTML = '<p>加载套餐失败，请稍后重试</p>';
            }
        }
        
        function renderSetMenusWithPagination(setMenusToRender, page) {
            const totalPages = Math.ceil(setMenusToRender.length / itemsPerPage);
            const startIndex = (page - 1) * itemsPerPage;
            const endIndex = startIndex + itemsPerPage;
            const paginatedItems = setMenusToRender.slice(startIndex, endIndex);

            renderSetMenus(paginatedItems); 
            // Pass the original (potentially filtered) array to setupPagination for correct total page count
            setupPagination(setMenusToRender.length, page, 'setmenu-pagination', renderSetMenusWithPagination, setMenusToRender);
        }

        function renderSetMenus(setMenus) {
            setmenuList.innerHTML = '';
            
            if (!setMenus || setMenus.length === 0) {
                setmenuList.innerHTML = '<p style="text-align: center; color: var(--text-light);">暂无套餐可供选择。</p>';
                return;
            }

            setMenus.forEach(setMenu => {
                const setMenuCard = document.createElement('div');
                setMenuCard.className = 'product-card';
                setMenuCard.innerHTML = `
                    <div class="badge">${setMenu.status === 1 ? '上架中' : '下架'}</div>
                    <div class="card-img">
                        <img src="${setMenu.image || 'https://via.placeholder.com/300x200?text=套餐图片'}" alt="${setMenu.name}">
                        <div class="quick-view" data-setmenu-id="${setMenu.id}" data-description="${setMenu.description || '暂无描述'}">查看详情</div>
                    </div>
                    <div class="card-content">
                        <h3>${setMenu.name}</h3>
                        <p>${setMenu.description || '暂无描述'}</p>
                        <div class="price">
                            ¥ ${setMenu.price.toFixed(2)}
                        </div>
                    </div>
                    <div class="card-footer">
                        <button class="add-to-cart" data-setmenu-id="${setMenu.id}" data-setmenu-name="${setMenu.name}" data-setmenu-price="${setMenu.price}">
                            <i class="fas fa-cart-plus"></i> 加入购物车
                        </button>
                    </div>
                `;
                setmenuList.appendChild(setMenuCard);
            });
            
            document.querySelectorAll('#setmenuList .quick-view').forEach(button => {
                button.addEventListener('click', function() {
                    const description = this.dataset.description;
                    showSetMenuDetails(description); 
                });
            });

            document.querySelectorAll('#setmenuList .add-to-cart').forEach(button => {
                button.addEventListener('click', function() {
                    const setMenuId = this.dataset.setmenuId;
                    const setMenuName = this.dataset.setmenuName;
                    const setMenuPrice = parseFloat(this.dataset.setmenuPrice);
                    
                    addToCart(0, setMenuId, setMenuName, setMenuPrice);
                });
            });
        }
        
        function setupPagination(totalItems, currentPage, containerId, renderFunction, dataArray) {
            console.log('===== setupPagination 开始 =====');
			console.log('容器 ID:', containerId);
			console.log('总条目数:', totalItems);
			console.log('当前页码:', currentPage);
			console.log('每页条目数:', itemsPerPage);

			// 2. 计算总页数并打印
			const totalPages = Math.ceil(totalItems / itemsPerPage);
			console.log('计算总页数:', totalPages);

			// 3. 打印获取到的分页容器
			const paginationContainer = document.getElementById(containerId);
			console.log('获取到的分页容器:', paginationContainer);
			console.log('容器 HTML 结构:', paginationContainer ? paginationContainer.outerHTML : '容器不存在');

			// 4. 打印上一页按钮
			const prevBtn = paginationContainer.querySelector('button:first-child');
			console.log('上一页按钮 (prevBtn):', prevBtn);
			console.log('上一页按钮内容:', prevBtn ? prevBtn.outerHTML : '未找到');

			// 5. 打印下一页按钮
			const nextBtn = paginationContainer.querySelector('button:last-child');
			console.log('下一页按钮 (nextBtn):', nextBtn);
			console.log('下一页按钮内容:', nextBtn ? nextBtn.outerHTML : '未找到');

			// 6. 打印页码容器
			const pageNumbersContainer = paginationContainer.querySelector('.page-numbers');
			console.log('页码容器 (pageNumbersContainer):', pageNumbersContainer);
			console.log('页码容器内容:', pageNumbersContainer ? pageNumbersContainer.outerHTML : '未找到');

            pageNumbersContainer.innerHTML = ''; 

            prevBtn.classList.toggle('disabled', currentPage === 1);
            nextBtn.classList.toggle('disabled', currentPage === totalPages || totalPages === 0);

            for (let i = 1; i <= totalPages; i++) {
                const pageNumBtn = document.createElement('button');
                pageNumBtn.className = 'page-number';
                pageNumBtn.textContent = i;
                if (i === currentPage) {
                    pageNumBtn.classList.add('active');
                }
                pageNumBtn.addEventListener('click', () => {
                    if (containerId === 'product-pagination') {
                        currentProductPage = i;
                        renderFunction(dataArray, currentProductPage);
                    } else if (containerId === 'setmenu-pagination') {
                        currentSetMenuPage = i;
                        renderFunction(dataArray, currentSetMenuPage);
                    }
                });
                pageNumbersContainer.appendChild(pageNumBtn);
            }
			
			// 移除克隆替换代码
            // const newPrevBtn = prevBtn.cloneNode(true);
            // prevBtn.parentNode.replaceChild(newPrevBtn, prevBtn);
            // const newNextBtn = nextBtn.cloneNode(true);
            // nextBtn.parentNode.replaceChild(newNextBtn, nextBtn);

            //newPrevBtn.addEventListener('click', () => {
			prevBtn.addEventListener('click', () => {
                if (currentPage > 1) {
                    if (containerId === 'product-pagination') {
                        currentProductPage--;
                        renderFunction(dataArray, currentProductPage);
                    } else if (containerId === 'setmenu-pagination') {
                        currentSetMenuPage--;
                        renderFunction(dataArray, currentSetMenuPage);
                    }
                }
            });

            //newNextBtn.addEventListener('click', () => {
			nextBtn.addEventListener('click', () => {
                if (currentPage < totalPages) {
                    if (containerId === 'product-pagination') {
                        currentProductPage++;
                        renderFunction(dataArray, currentProductPage);
                    } else if (containerId === 'setmenu-pagination') {
                        currentSetMenuPage++;
                        renderFunction(dataArray, currentSetMenuPage);
                    }
                }
            });
        }
        
        function showProductDetails(description) {
            alert(description);
        }
        
        function showSetMenuDetails(description) {
             alert(description);
        }
        
        async function addToCart(productId, setMenuId, name, price) {
            if (!user) {
                alert('请先登录');
                window.location.href = 'login.html';
                return;
            }
            
            try {
                const response = await axios.post(`${API_BASE_URL}/user/shoppingCart/add`, {
                    productId: productId,
                    setmenuId: setMenuId,
                    productFeature: name 
                });
                
                if (response.data.code === 1) {
                    loadCart();
                    alert('已添加到购物车');
                } else {
                    alert('添加到购物车失败：' + (response.data.msg || '未知错误'));
                }
            } catch (error) {
                console.error('添加到购物车失败:', error);
                alert('添加到购物车失败');
            }
        }
        
        async function loadCart() {
            try {
                const response = await axios.get(`${API_BASE_URL}/user/shoppingCart/list`);
                if (response.data.code === 1) {
                    cart.items = response.data.data;
                    updateCartUI();
                }
            } catch (error) {
                console.error('加载购物车失败:', error);
            }
        }
        
        function updateCartUI() {
            cartItemsContainer.innerHTML = '';
            cartCount.textContent = cart.items.length;
            
            if (cart.items.length === 0) {
                cartItemsContainer.innerHTML = `
                    <div class="cart-empty">
                        <i class="fas fa-shopping-basket"></i>
                        <h3>您的购物车是空的</h3>
                        <p>请添加一些商品到购物车</p>
                    </div>
                `;
                cartSubtotal.textContent = '¥ 0';
                cartTotal.textContent = '¥ 0';
                return;
            }
            
            let subtotal = 0;
            
            cart.items.forEach(item => {
				const itemTotal = item.amount * item.number;
				subtotal += itemTotal;
        
				const cartItem = document.createElement('div');
				cartItem.className = 'cart-item';
				cartItem.innerHTML = `
					<div class="cart-item-img">
						<img src="${item.image || 'https://via.placeholder.com/80x80?text=商品图片'}" alt="${item.name}">
					</div>
					<div class="cart-item-info">
						<div class="cart-item-title">
							<span>${item.name}</span>
							<span class="remove-item" data-id="${item.id}"><i class="fas fa-trash"></i></span>
						</div>
						<div class="cart-item-price">¥ ${item.amount.toFixed(2)}</div>
						<div class="cart-item-actions">
							<button class="quantity-btn minus" data-id="${item.id}">-</button>
							<input type="text" class="quantity-input" value="${item.number}" data-id="${item.id}">
							<button class="quantity-btn plus" data-id="${item.id}">+</button>
						</div>
					</div>
				`;
				cartItemsContainer.appendChild(cartItem);
			});
            
            cart.subtotal = subtotal;
            cart.total = subtotal; 
            
            cartSubtotal.textContent = '¥ ' + subtotal.toFixed(2);
            cartTotal.textContent = '¥ ' + cart.total.toFixed(2);
            
            document.querySelectorAll('.remove-item').forEach(btn => {
                btn.addEventListener('click', function() {
                    const itemId = this.dataset.id;
                    removeFromCart(itemId);
                });
            });
            
            document.querySelectorAll('.quantity-btn.minus').forEach(btn => {
                btn.addEventListener('click', function() {
                    const itemId = this.dataset.id;
                    updateCartItem(itemId, -1);
                });
            });
            
            document.querySelectorAll('.quantity-btn.plus').forEach(btn => {
                btn.addEventListener('click', function() {
                    const itemId = this.dataset.id;
                    updateCartItem(itemId, 1);
                });
            });
        }
        
        async function removeFromCart(itemId) {
            try {
                const response = await axios.delete(`${API_BASE_URL}/user/shoppingCart/sub?id=${itemId}`);
                if (response.data.code === 1) {
                    loadCart();
                }
            } catch (error) {
                console.error('移除购物车商品失败:', error);
            }
        }
        
        async function updateCartItem(itemId, change) {
            try {
                const item = cart.items.find(i => i.id == itemId);
                if (!item) return;
                
                const newQuantity = item.number + change;
                if (newQuantity < 1) return;
                
                const response = await axios.put(`${API_BASE_URL}/user/shoppingCart/update`, {
                    id: itemId,
                    number: newQuantity
                });
                
                if (response.data.code === 1) {
                    loadCart();
                }
            } catch (error) {
                console.error('更新购物车商品失败:', error);
            }
        }
        
        async function clearCart() {
            try {
                const response = await axios.delete(`${API_BASE_URL}/user/shoppingCart/clean`);
                if (response.data.code === 1) {
                    cart.items = [];
                    updateCartUI();
                }
            } catch (error) {
                console.error('清空购物车失败:', error);
            }
        }
        
        async function loadAddresses() {
            try {
                const response = await axios.get(`${API_BASE_URL}/user/addressBook/list`);
                if (response.data.code === 1) {
                    renderAddresses(response.data.data);
                }
            } catch (error) {
                console.error('加载地址失败:', error);
            }
        }
        
        function renderAddresses(addresses) {
            addressList.innerHTML = '';
            document.getElementById('address-list-payment').innerHTML = ''; 
            
            if (addresses.length === 0) {
                addressList.innerHTML = '<p>暂无地址，请添加新地址</p>';
                document.getElementById('address-list-payment').innerHTML = '<p>暂无地址，请添加新地址</p>';
                selectedAddress = null;
                return;
            }
            
            addresses.forEach(address => {
                const addressElement = document.createElement('div');
                addressElement.className = 'address-item';
                if (address.isDefault === 1) {
                    addressElement.classList.add('selected');
                    selectedAddress = address;
                }
                addressElement.innerHTML = `
                    <h4>${address.consignee} ${address.phone}</h4>
                    <p>${address.provinceName || ''}${address.cityName || ''}${address.districtName || ''}${address.detail}</p>
                    <div class="actions">
                        <button class="btn" onclick="editAddress(${address.id})">编辑</button>
                        <button class="btn danger" onclick="deleteAddress(${address.id})">删除</button>
                        <button class="btn success" onclick="setDefaultAddress(${address.id})">设默认</button>
                    </div>
                `;
                addressList.appendChild(addressElement);

                const addressElementPayment = addressElement.cloneNode(true);
                addressElementPayment.classList.remove('selected'); 
                if (address.isDefault === 1) {
                    addressElementPayment.classList.add('selected');
                }
                addressElementPayment.onclick = (event) => selectAddressForPayment(address, event);
                addressElementPayment.querySelector('.actions').remove(); 
                document.getElementById('address-list-payment').appendChild(addressElementPayment);
            });

            if (!selectedAddress && addresses.length > 0) {
                addresses[0].isDefault = 1; 
                selectedAddress = addresses[0];
                document.getElementById('address-list-payment').children[0].classList.add('selected');
            } else if (selectedAddress && !addresses.find(addr => addr.id === selectedAddress.id)) {
                selectedAddress = null;
                if (addresses.length > 0) {
                    addresses[0].isDefault = 1;
                    selectedAddress = addresses[0];
                    document.getElementById('address-list-payment').children[0].classList.add('selected');
                }
            }
        }

        function selectAddressForPayment(address, event) {
            selectedAddress = address;
            document.querySelectorAll('#address-list-payment .address-item').forEach(item => {
                item.classList.remove('selected');
            });
            event.currentTarget.classList.add('selected');
        }

        function editAddress(addressId) {
            alert(`编辑地址 ID: ${addressId}`);
        }

        async function deleteAddress(addressId) {
            if (!confirm('确定要删除此地址吗？')) return;
            try {
                const response = await axios.delete(`${API_BASE_URL}/user/addressBook?id=${addressId}`);
                if (response.data.code === 1) {
                    alert('地址删除成功');
                    loadAddresses();
                } else {
                    alert('删除地址失败: ' + (response.data.msg || '未知错误'));
                }
            } catch (error) {
                console.error('删除地址失败:', error);
                alert('删除地址失败');
            }
        }

        async function setDefaultAddress(addressId) {
            try {
                const response = await axios.put(`${API_BASE_URL}/user/addressBook/default?id=${addressId}`);
                if (response.data.code === 1) {
                    alert('已设为默认地址');
                    loadAddresses(); 
                } else {
                    alert('设置默认地址失败: ' + (response.data.msg || '未知错误'));
                }
            } catch (error) {
                console.error('设置默认地址失败:', error);
                alert('设置默认地址失败');
            }
        }
        
        function bindEventListeners() {
            cartIcon.addEventListener('click', toggleCartPanel);
            closeCartBtn.addEventListener('click', toggleCartPanel);
            checkoutBtn.addEventListener('click', showPaymentModal);
            closePaymentBtn.addEventListener('click', hidePaymentModal);
            submitPaymentBtn.addEventListener('click', submitOrder);
            addAddressBtn.addEventListener('click', showAddrForm);
            closeAddressBtn.addEventListener('click', hideAddrForm);
            saveAddressBtn.addEventListener('click', saveAddress);
            continueShoppingBtn.addEventListener('click', function() {
                hidePaymentModal();
                clearCart();
                ordersPanel.classList.add('active');
                loadOrders();
            });

            document.querySelectorAll('.payment-option').forEach(option => {
                option.addEventListener('click', function() {
                    document.querySelectorAll('.payment-option').forEach(opt => opt.classList.remove('active'));
                    this.classList.add('active');
                });
            });

            document.getElementById('generate-cart-image-btn').addEventListener('click', generateCartAIImage);
        }
        
        function toggleCartPanel() {
            cartPanel.classList.toggle('active');
        }
        
        function showPaymentModal() {
            if (cart.items.length === 0) {
                alert('购物车为空，请先添加商品');
                return;
            }
            paymentModal.classList.add('active');
            document.querySelector('.payment-info').style.display = 'block';
            document.querySelector('.success-payment').style.display = 'none'; 
            paymentTotal.textContent = '¥' + cart.total.toFixed(2);
            loadAddresses();
        }
        
        function hidePaymentModal() {
            paymentModal.classList.remove('active');
        }
        
        function showAddrForm() {
            addressModal.classList.add('active');
            document.getElementById('consignee').value = '';
            document.getElementById('phone').value = '';
            document.getElementById('province').value = '';
            document.getElementById('city').value = '';
            document.getElementById('district').value = '';
            document.getElementById('detail').value = '';
            document.getElementById('is-default').checked = false;
        }
        
        function hideAddrForm() {
            addressModal.classList.remove('active');
        }
        
        async function saveAddress() {
            const consignee = document.getElementById('consignee').value;
            const phone = document.getElementById('phone').value;
            const province = document.getElementById('province').value;
            const city = document.getElementById('city').value;
            const district = document.getElementById('district').value;
            const detail = document.getElementById('detail').value;
            const isDefault = document.getElementById('is-default').checked ? 1 : 0;
            
            if (!consignee || !phone || !detail) {
                alert('请填写必填字段');
                return;
            }
            
            try {
                const response = await axios.post(`${API_BASE_URL}/user/addressBook`, {
                    consignee: consignee,
                    phone: phone,
                    provinceName: province,
                    cityName: city,
                    districtName: district,
                    detail: detail,
                    isDefault: isDefault,
                    userId: userId
                });
                
                if (response.data.code === 1) {
                    hideAddrForm();
                    loadAddresses();
                } else {
                    alert('保存地址失败: ' + (response.data.msg || '未知错误'));
                }
            } catch (error) {
                console.error('保存地址失败:', error);
                alert('保存地址失败');
            }
        }
        
        async function submitOrder() {
            if (!selectedAddress) {
                alert('请选择配送地址');
                return;
            }
            
            const selectedPaymentMethod = document.querySelector('.payment-option.active').dataset.method;

            try {
                const response = await axios.post(`${API_BASE_URL}/user/order/submit`, {
                    addressBookId: selectedAddress.id,
                    amount: cart.total,
                    payMethod: parseInt(selectedPaymentMethod), 
                    deliveryStatus: 0,
                    packAmount: 0,
                    tablewareNumber: 0,
                    tablewareStatus: 0,
                    remark: "家具商城订单",
                });
                
                if (response.data.code === 1) {
                    document.querySelector('.payment-info').style.display = 'none';
                    document.querySelector('.success-payment').style.display = 'block';
                } else {
                    alert('提交订单失败：' + (response.data.msg || '未知错误'));
                }
            } catch (error) {
                console.error('提交订单失败:', error);
                alert('提交订单失败');
            }
        }
        
        async function loadOrders() {
            try {
                const response = await axios.get(`${API_BASE_URL}/user/order/historyOrders`);
                if (response.data.code === 1) {
                    renderOrders(response.data.data.records);
                } else {
                    console.error('加载订单失败:', response.data.msg);
                    ordersContainer.innerHTML = `<p style="text-align: center; color: var(--text-light);">加载订单失败：${response.data.msg}</p>`;
                }
            } catch (error) {
                console.error('加载订单失败:', error);
                ordersContainer.innerHTML = '<p style="text-align: center; color: var(--text-light);">加载订单失败，请稍后重试</p>';
            }
        }
        
        function renderOrders(orders) {
            ordersContainer.innerHTML = '';
            
            if (!orders || orders.length === 0) {
                ordersContainer.innerHTML = `
                    <div class="no-orders">
                        <i class="fas fa-box-open"></i>
                        <h3>暂无订单记录</h3>
                        <p>您还没有下过订单</p>
                    </div>
                `;
                return;
            }
            
            orders.forEach(order => {
                const orderCard = document.createElement('div');
                orderCard.className = 'order-card';
                
                let statusClass = '';
                let statusText = '';
                switch(order.status) {
                    case 1: statusClass = 'status-pending'; statusText = '待付款'; break;
                    case 2: statusClass = 'status-paid'; statusText = '已付款'; break;
                    case 3: statusClass = 'status-shipped'; statusText = '已发货'; break;
                    case 4: statusClass = 'status-completed'; statusText = '已完成'; break;
                    case 5: statusClass = 'status-canceled'; statusText = '已取消'; break;
                    default: statusClass = ''; statusText = '未知状态';
                }
                
                const orderItemsHtml = order.orderDetail && Array.isArray(order.orderDetail) ? order.orderDetail.map(item => `
                    <div class="order-item">
                        <div class="order-item-img">
                            <img src="${item.image || 'https://via.placeholder.com/60x60?text=' + item.name}" alt="${item.name}">
                        </div>
                        <div class="order-item-info">
                            <div class="order-item-title">${item.name}</div>
                            <div class="order-item-price">¥ ${item.amount ? item.amount.toFixed(2) : 'N/A'} x ${item.number}</div>
                        </div>
                    </div>
                `).join('') : '<p>无商品详情</p>';

                orderCard.innerHTML = `
                    <div class="order-header">
                        <div class="order-id">订单号: ${order.orderNumber}</div>
                        <div class="order-status ${statusClass}">${statusText}</div>
                    </div>
                    <div class="order-details">
                        <div class="order-details-row">
                            <div class="order-label">下单时间</div>
                            <div class="order-value">${new Date(order.orderTime).toLocaleString()}</div>
                        </div>
                        <div class="order-details-row">
                            <div class="order-label">金额</div>
                            <div class="order-value">¥ ${order.amount.toFixed(2)}</div>
                        </div>
                        <div class="order-details-row">
                            <div class="order-label">支付方式</div>
                            <div class="order-value">${order.payMethod === 1 ? '支付宝' : (order.payMethod === 2 ? '微信支付' : '银行卡')}</div>
                        </div>
                    </div>
                    <div class="order-items">
                        <h4>订单商品</h4>
                        ${orderItemsHtml}
                    </div>
                    <div class="order-actions">
                        <button class="order-action-btn order-action-view">查看详情</button>
                    </div>
                `;
                ordersContainer.appendChild(orderCard);
            });
        }

        // 自动用购物车商品名生成AI图片的功能
        async function generateCartAIImage() {
            const resultDiv = document.getElementById('cart-ai-image-result');
            if (!cart.items || cart.items.length === 0) {
                alert('购物车为空，无法生成图片');
                return;
            }
            const keyword = cart.items.map(item => item.name).join('，');
            if (!keyword) {
                alert('没有有效商品名');
                return;
            }
            resultDiv.innerHTML = '正在生成图片，请稍候...';
            try {
                // 推荐用URL参数方式，兼容@RequestParam
                const params = new URLSearchParams();
                params.append('text', keyword);
                const response = await axios.post(
                    API_BASE_URL + '/user/ai/text2img?' + params.toString(),
                    {}
                );
                let imgUrl = '';
                if (response.data && typeof response.data === 'string') {
                    imgUrl = response.data;
                } else if (response.data && response.data.data) {
                    imgUrl = response.data.data;
                }
                if (imgUrl) {
                    resultDiv.innerHTML = `<img src="${imgUrl}" alt="AI生成图片" style="max-width:300px;border-radius:12px;box-shadow:0 4px 20px #eee"/><div style="color:#999;font-size:13px;margin-top:5px;">关键词：${keyword}</div>`;
                } else {
                    resultDiv.innerHTML = '图片生成失败，请重试';
                }
            } catch (e) {
                resultDiv.innerHTML = '图片生成失败，请重试';
                console.error(e);
            }
        }
    </script>
 </body>
</html>

